<template>
  <div class="container">
    <div class="batch">
      <a-row>
        <a-col :span="4">
          <planUnit :form.sync="planUnitForm" />
        </a-col>
        <a-col :span="4" class="offset">
          <originality :form.sync="originalityForm" />
        </a-col>
        <a-col :span="8" class="offset">
          <pic :form.sync="picForm" />
        </a-col>
        <a-col :span="8" class="offset">
          <myVideo :form.sync="myVideoForm" />
        </a-col>
      </a-row>
      <a-popconfirm title="确定提交？" ok-text="提交" cancel-text="取消" @confirm='submit' style="margin-top: 20px;">
        <a-button type="primary" :loading="loading">
          提交
        </a-button>
      </a-popconfirm>
      <a-popconfirm title="确定提交？" ok-text="提交" cancel-text="取消" @confirm='submitSync' style="margin-left: 5px;margin-top: 20px;">
        <a-button type="primary" :loading="loading">
          异步提交
        </a-button>
      </a-popconfirm>
      <a-popconfirm title="确定返回？" ok-text="返回" cancel-text="取消" @confirm='back' style="margin-left: 5px;">
        <a-button style="box-sizing: content-box;">返回</a-button>
      </a-popconfirm>
      {{result}}
    </div>
  </div>
</template>

<script>
import planUnit from './components/planUnit'
import originality from './components/originality'
import pic from './components/pic'
import myVideo from './components/video'
import {oneClickCreate, asyncOneClickCreate} from '@/api/xinxiliu/chuangyi'

export default {
  data() {
    return {
      planUnitForm:{},
      originalityForm:{},
      picForm: [],
      myVideoForm: [],
      loading:false,
      result:'',
    }
  },
  methods:{
    submit(){
      // console.log(this.planUnitForm, this.originalityForm, this.picForm, this.myVideoForm)
      let params = {
        ...this.planUnitForm,
        ...this.originalityForm,
        picList: this.picForm,
        videoList: this.myVideoForm
      }
      let fd = this.getFormData(params)
      // for (let [a, b] of fd.entries()) {
      //   console.log(a, b, '--------------');
      // } 
      this.loading = true
      oneClickCreate(fd).then((res) => {
        console.log(res)
        this.loading = false
        if(res.errcode == 0){
          this.$message.success('提交成功')
        }
      }).catch((err) => {
        console.log(err)
        this.loading = false
      });
    },
    submitSync(){
      let params = {
        ...this.planUnitForm,
        ...this.originalityForm,
        picList: this.picForm,
        videoList: this.myVideoForm
      }
      let fd = this.getFormData(params)
      this.loading = true
      asyncOneClickCreate(fd).then((res) => {
        console.log(res)
        this.loading = false
        if(res.errcode == 0){
          this.$message.success(res.errmsg)
        }
      }).catch((err) => {
        console.log(err)
        this.loading = false
      });
    },
    getFormData(params){
      var fd = new FormData();
      for(let [key, value] of Object.entries(params)){
        if(key == "picList"){
          for(let [, i] of Object.entries(value)){
            // console.log(key+idx, i)
            // fd.append(key+"["+idx+"]", i)
            // let fileName = new Date().valueOf() + Math.floor(Math.random()*(100000-1)+1) + '.' +i.type.split('/')[1]
            fd.append(key+"[]", i.blob, i.name)
          }
        }else if(key == 'userPortrait'){
          fd.append(key+"[]", value.blob, value.name)
        }else if(key == 'custom' || key == 'program'){
          let v = {}
          value.forEach(e => {
            v[e['key']] = e
          });
          fd.append(key, JSON.stringify(v))
        }else if(key == 'videoList'){
          fd.append(key, JSON.stringify(value))
        }
        else{
          fd.append(key, value)
        }
      }
      return fd
    },
    back(){
      this.$router.back(-1)
    },
  },
  components:{planUnit, originality, pic, myVideo}
}
</script>

<style lang="less" scoped>
.container{
  background-color: #f0f2f5;
  height: 100vh;
  overflow: hidden;
  .batch{
    width: 1460px;
    margin: 100px auto 0;
    background-color: #ffffff;
    height: 450px;
  }
  .offset{
    margin-left: -1px;
  }
}
</style>
